<template>
  <view class="grades-container">
    <view class="grades-caption">
      <view class="grades-caption-title">{{data.paperTemplate.examName}}</view>
      <view class="grades-caption-content">
        <view class="grades-caption-time">{{data.times.minutes}}'{{data.times.seconds}}''</view>
        <view class="grades-caption-tag">
          <view>恭喜您成功获得证书！</view>
        </view>
      </view>
      <view class="grades-caption-tip">
        培训考试
      </view>
    </view>
    <view class="grades-charts-card grades-card">
      <view class="overview-info">
        <view>
          <view>总共</view>
          <view style="color: #323232;"><text>{{data.count.zongshu}}</text>题</view>
        </view>
        <view>
          <view>已答题</view>
          <view style="color: #1A63FF;"><text>{{hasAnswered}}</text>题</view>
        </view>
        <view>
          <view>未答题</view>
          <view style="color: #646464;"><text>{{data.count.noanswer}}</text>题</view>
        </view>
        <view>
          <view>总用时</view>
          <view style="color: #FF6B00;"><text>{{data.times.minutes}}'{{data.times.seconds}}''</text></view>
        </view>
      </view>
      <view>
        <view class="chart-box">
          <qiun-data-charts type="ring" :opts="opts" :chartData="chartData" :optsWatch="false" />
        </view>
        <view class="chart-legend">
          <view class="legend-ydt">
            <view>已答题</view>
            <view>{{hasAnswered}}</view>
          </view>
          <view class="legend-wdt">
            <view>未答题</view>
            <view>{{data.count.noanswer}}</view>
          </view>
        </view>
      </view>
      <view>
        <view class="chart-box">
          <qiun-data-charts type="ring" :opts="fsOpts" :chartData="fsChartData" :optsWatch="false" />
        </view>
        <view class="chart-legend">
          <view class="legend-qbts">
            <view>全部题数</view>
            <view><text>{{data.count.zongshu}}</text>道</view>
          </view>
          <view class="legend-jgf">
            <view>及格分数/总分</view>
            <view><text style="color:#03C688">{{data.jige||60}}</text>/<text
                style="color:#FF3649">{{data.totalScore||100}}</text></view>
          </view>
        </view>
      </view>
    </view>
    <view class="dt-title">本次答题<text>{{hasAnswered}}</text><text style="color: #969696;">/{{data.count.zongshu}}</text>
    </view>
    <view class="grades-type-list grades-card">
      <view class="grades-type-item" v-for="(item,index) in data.questtypes" :key="index">
        <view>
          <view><text>{{item.zongshu}}</text>道</view>
          <view>{{questionType[item.qtype]}}</view>
        </view>
        <view>
          <view><text>{{item.rights}}</text>道</view>
          <view>正确</view>
        </view>
        <view>
          <view><text>{{item.ERRORS}}</text>道</view>
          <view>错误</view>
        </view>
        <view>
          <view><text>{{item.noanswer}}</text>道</view>
          <view>未答</view>
        </view>
      </view>
      <!-- <view class="grades-type-item">
        <view>
          <view><text>12</text>道</view>
          <view>单选题</view>
        </view>
        <view>
          <view><text>7</text>道</view>
          <view>正确</view>
        </view>
        <view>
          <view><text>4</text>道</view>
          <view>错误</view>
        </view>
        <view>
          <view><text>1</text>道</view>
          <view>未答</view>
        </view>
      </view>
      <view class="grades-type-item">
        <view>
          <view><text>12</text>道</view>
          <view>单选题</view>
        </view>
        <view>
          <view><text>7</text>道</view>
          <view>正确</view>
        </view>
        <view>
          <view><text>4</text>道</view>
          <view>错误</view>
        </view>
        <view>
          <view><text>1</text>道</view>
          <view>未答</view>
        </view>
      </view>
      <view class="grades-type-item">
        <view>
          <view><text>12</text>道</view>
          <view>单选题</view>
        </view>
        <view>
          <view><text>7</text>道</view>
          <view>正确</view>
        </view>
        <view>
          <view><text>4</text>道</view>
          <view>错误</view>
        </view>
        <view>
          <view><text>1</text>道</view>
          <view>未答</view>
        </view>
      </view> -->
    </view>
    <view class="block-btn" @click="onReTest">重考<text style="font-size: 24rpx;">（在规定时间内，取最高分数）</text></view>
    <view style="height: 120rpx;"></view>
    <view class="action-bar">
      <view>
        <view></view>
        <view>全部解析 </view>
      </view>
      <view>
        <view></view>
        <view>错题解析</view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getPaperCount
  }
  from "@/common/api/exam/exam.js";
  export default {
    data() {
      return {
        id: '',
        data: {},
        questionType: {
          1: '单选',
          2: '多选',
          3: '判断',
          4: '填空',
          5: '简答'
        },
        chartData: {},
        fsChartData: {},
        opts: {
          rotate: false,
          rotateLock: false,
          color: ["#3C78E3", "#03C688"],
          padding: [5, 5, 5, 5],
          dataLabel: false,
          enableScroll: false,
          legend: {
            show: false,
          },
          title: {
            name: "正确率",
            fontSize: 15,
            color: "#969696"
          },
          subtitle: {
            name: "70%",
            fontSize: 25,
            fontWeight: 'bold',
            color: "#323232"
          },
          extra: {
            ring: {
              ringWidth: 30,
              activeOpacity: 0.5,
              activeRadius: 10,
              border: true,
              borderWidth: 1,
              borderColor: "#FFFFFF"
            }
          }
        },
        fsOpts: {
          rotate: false,
          rotateLock: false,
          color: ["#3C78E3", "#FF4E6C"],
          padding: [5, 5, 5, 5],
          dataLabel: false,
          enableScroll: false,
          legend: {
            show: false,
          },
          title: {
            name: "分数",
            fontSize: 15,
            color: "#969696"
          },
          subtitle: {
            name: "76",
            fontSize: 25,
            fontWeight: 'bold',
            color: "#323232"
          },
          extra: {
            ring: {
              ringWidth: 30,
              activeOpacity: 0.5,
              activeRadius: 10,
              border: true,
              borderWidth: 1,
              borderColor: "#FFFFFF"
            }
          }
        }
      }
    },
    onLoad(option) {
      this.examId = option.examId;
      this.getPaperCountData(option.id);
    },
    computed: {
      hasAnswered() {
        return this.data.count.zongshu * 1 - this.data.count.noanswer * 1
      }
    },
    methods: {
      getPaperCountData(id) {
        getPaperCount({
          userPaperId: id
        }).then(res => {
          this.data = res.data;
          let data = {
            series: [{
              data: [{
                  "name": "已答题",
                  "value": this.hasAnswered,
                },
                {
                  "name": "未答题",
                  "value": res.data.count.noanswer,
                },
              ]
            }]
          };
          this.opts.subtitle.name = `${res.data.count.rights / (res.data.count.zongshu * 1) * 100}%`;
          this.chartData = JSON.parse(JSON.stringify(data));
          let fsdata = {
            series: [{
              data: [{
                  "name": "得分",
                  "value": res.data.realScore,
                },
                {
                  "name": "总分",
                  "value": res.data.totalScore || 100,
                },
              ]
            }]
          };
          this.fsOpts.subtitle.name = res.data.realScore;
          this.fsChartData = JSON.parse(JSON.stringify(fsdata));
        })
      },
      onReTest() {
        uni.navigateTo({
          url: `/pages/exam/test?id=${this.examId}`
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background: url("../../static/bg.png");
    background-color: #E6ECF9;
  }

  .grades-container {
    padding: 20rpx 4%;
  }

  .grades-caption {
    position: relative;
    background: linear-gradient(180deg, rgba(179, 207, 255, 0.35), #fff);
    box-shadow: 0px 4px 10px 0px rgba(213, 214, 215, 0.2);
    border-radius: 18rpx;
    padding: 20rpx;
  }

  .grades-caption-content {
    margin-top: 20rpx;
    font-size: 21rpx;
  }

  .grades-caption-title {
    color: #323232;
    font-size: 28rpx;
    font-weight: bold;
  }

  .grades-caption-tip {
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    font-size: 22rpx;
    padding: 10rpx 25rpx;
    background: linear-gradient(90deg, #438BFE 0%, #1A63FF 100%);
    border-top-right-radius: 20rpx;
    border-bottom-left-radius: 20rpx;
  }

  .grades-caption-time {
    display: inline-block;
    margin-right: 10rpx;
    color: #969696;
  }

  .grades-caption-tag {
    display: inline-block;
    padding: 5rpx;
    border: 1px solid #FF3649;
    border-radius: 5rpx;

    >view {
      padding: 5rpx 20rpx;
      background-color: #FF3649;
      color: #fff;
      border-radius: 5rpx;
    }
  }

  .grades-charts-card {
    margin-top: 20rpx;
  }

  .grades-card {
    background-color: #fff;
    border-radius: 18rpx;
    padding: 30rpx;
  }

  .overview-info {
    background: #F6F7FB;
    border-radius: 18rpx;
    display: flex;
    padding: 20rpx 0;
    text-align: center;

    >view {
      flex: 1;

      view:first-child {
        font-size: 22rpx;
        color: #646464;
        margin-bottom: 15rpx;
      }

      view:last-child {
        font-size: 18rpx;

        text {
          font-size: 28rpx;
        }
      }
    }
  }

  .chart-box {
    padding: 30rpx 80rpx;
  }

  .chart-legend {
    display: flex;
    gap: 20rpx;

    >view {
      flex: 1;
      padding: 30rpx 0rpx;
      text-align: center;
      font-size: 20rpx;
      border-radius: 4rpx;

      &:before {
        content: '';
        display: inline-block;
        width: 23rpx;
        height: 23rpx;
        margin-right: 20rpx;
      }

      >view {
        display: inline-block;
      }

      >view:last-child {
        margin-left: 20rpx;
      }
    }

    .legend-ydt {
      background: rgba(60, 120, 227, 0.05);

      &::before {
        background-color: #3C78E3;
      }

      view:last-child {
        color: #3C78E3;
        font-size: 40rpx;
        font-weight: bold;
      }
    }

    .legend-qbts {
      font-size: 24rpx;
      background: rgba(60, 120, 227, 0.05);

      &::before {
        display: none;
      }

      view:last-child {
        text {
          color: #3C78E3;
          font-size: 40rpx;
          font-weight: bold;
        }
      }
    }

    .legend-jgf {
      font-size: 24rpx;
      background: rgba(255, 54, 73, 0.05);

      &::before {
        display: none;
      }

      view:last-child {
        color: #C8C8C8;
        font-size: 40rpx;
        font-weight: bold;
      }
    }

    .legend-wdt {
      background: rgba(3, 198, 136, 0.05);

      &::before {
        background-color: #03C688;
      }

      view:last-child {
        color: #03C688;
        font-size: 40rpx;
        font-weight: bold;
      }
    }
  }

  .block-btn {
    margin-top: 40rpx;
    background: linear-gradient(115deg, #438BFE 0%, #1A63FF 100%);
    border-radius: 45px;
    text-align: center;
    font-size: 40rpx;
    color: #fff;
    padding: 25rpx 0;
  }

  .dt-title {
    font-size: 32rpx;
    color: #323232;
    margin: 50rpx 0 40rpx;
  }

  .grades-type-item {
    overflow: hidden;
    text-align: center;
    padding: 20rpx 0;

    >view {
      float: left;
      width: 25%;
      font-size: 22rpx;
      color: #000000;

      view {
        padding: 10rpx 0;

        text {
          font-size: 30rpx;
        }
      }
    }
  }

  .action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    text-align: center;
    padding: 30rpx;
    background-color: #fff;
    color: #969696;

    >view {
      flex: 1;
    }
  }
</style>